<template>
	<view class="content">
		<u-navbar title="订单详情" bgColor="#07c160" :placeholder="true" :border="false" leftIconColor="#fff"
			:titleStyle="{ color: '#FFF', fontSize: '32rpx' }" @leftClick="back"></u-navbar>
		<!-- <image src="../../static/images/bg8.png" mode="widthFix" class="bg_img" style="top:initial"></image> -->
		<view class="top">
			<view class="klc">
				<!-- <view class="klc_tit" v-if="status ==0 || status ==1 ||status ==2 ||status ==3 ||status ==4">订单进行中
				</view>
				<view class="klc_tit" v-if="status ==5">服务完成，交易成功</view>
				<view class="klc_tit" v-if="status ==6">订单已取消，交易关闭</view> -->
				<view class="klc_num"> 下单时间 {{info.createTime}}</view>
			</view>
			<view class="lop">
				<view class="hjk_tit">核销券码</view>
				<view style="margin-top:10upx;color:#999">为保障您的权益，请开始服务时再出示</view>
				<view style="display: flex;justify-content: center;" class="qrcode">
					<!-- <image
						src="https://img1.baidu.com/it/u=1543744943,230774498&fm=253&fmt=auto&app=138&f=GIF?w=200&h=200"
						style="width:400upx;height:400upx;"></image> -->
					<view id="qrcodeCanvas"></view>
				</view>
			</view>
		</view>
		<!-- end -->
		<!-- 兼职技师显示 -->
		<!-- status:0待接单 1接单 2出发 3到达 4开始服务  5服务完成 6取消订单-->
		<!-- <view class="status_img_view">
			<image src="../../static/images/status0.png" mode="widthFix" class="status_img" v-if="status ==0"></image>
			<image src="../../static/images/status1.png" mode="widthFix" class="status_img" v-if="status ==1"></image>
			<image src="../../static/images/status2.png" mode="widthFix" class="status_img" v-if="status ==2"></image>
			<image src="../../static/images/status3.png" mode="widthFix" class="status_img" v-if="status ==3"></image>
			<image src="../../static/images/status4.png" mode="widthFix" class="status_img" v-if="status ==4"></image>
			<image src="../../static/images/status5.png" mode="widthFix" class="status_img" v-if="status ==5"></image>
			<image src="../../static/images/status0.png" mode="widthFix" class="status_img" v-if="status ==6"></image>
		</view> -->
		<!-- 取消订单状态的图 -->
		<!-- end -->

		<!-- 在店技师显示 -->
		<!-- 	<view class="status_img_view">
			<image src="../../static/images/status3.png" mode="widthFix" class="status_img"></image>
		</view> -->
		<!-- <view class="tp">
			<view class="tp_you">
				<view class="tp_you_left">
					<image src="../../static/images/bai_address.png" mode="widthFix" class="you_bai_address_img">
					</image>
				</view>
				<view class="tp_you_right">
					<view class="tp_you_right_sm">
						门店联系人：李小姐 15088881548
					</view>
					<view class="tp_you_right_sm_text">
						<text style="width:75%">门店地址：东莞市南城区元美西路2号东莞市南城区元美西路2号</text>
						<text class="ikd" style="margin-left:40upx;" @click="copy('东莞市南城区元美西路2号东莞市南城区元美西路2号')">复制</text>
					</view>
				</view>
			</view>
		</view> -->
		<!-- end -->
		<!-- end -->
		<view class="lop">
			<!-- <view class="list_cen">
				<image src="http://192.168.1.4:9000/hotel/2023/07/19/882b25156bff46a5957555ad63e1d6a7.png"
					class="tou_img"></image>
				<view class="list_cen_right">
					<view class="list_cen_right_text">服务技师：神里凌华 </view>
					<view class="list_btn" v-if="status !== 6" @click="cancel_order()">取消订单</view>
					<view class="list_btn" v-if="status == 6" @click="drawback()">退款进度</view>
				</view>
			</view> -->
			<view class="lop_sm" v-for="(item,index) of info.itemListVoList" :key="index">
				<view class="lop_sm_left">
					<view class="dsx">
						{{item.itemName}}
					</view>
					<view class="csx">
						时长：{{item.itemDuration || 0}}分钟 x1
					</view>
				</view>
				<view class="lop_sm_right">
					￥{{item.itemPrice}}.00
				</view>
			</view>
			<view class="ujd_sm">
				<view class="ujd_text" style="color:#ff6c00;display: flex;align-items: center;">
					<image src="../../static/images/icon_quan.png" mode="widthFix"
						style="width:35upx;margin-right:10upx;"></image>
					优惠抵扣
				</view>
				<view class="ujd_text" style="color:#ff6c00">
					-￥{{info.preferentialMoney}}.00
				</view>
			</view>
			<view class="lop_end">
				<view class="ujd_sm">
					<view class="ujd_text">
						总服务时长:{{ allTime || 0 }}分钟
					</view>
					<view class="ujd_text">
						合计￥{{info.price}}.00
					</view>
				</view>
			</view>
		</view>
		<!-- end -->
		<!-- <view class="hjk">
			<view class="hjk_tit">订单信息</view>
			<view class="hjk_text">订单编号：11114313131321231212 <text style="margin-left:10upx"
					@click="copy('11114313131321231212')">复制</text></view>
			<view class="hjk_text">服务房号：待分配 </view>
			<view class="hjk_text">下单时间：2022-12-31 12:31 </view>
			<view class="hjk_text">支付方式：微信支付</view>
			<view class="hjk_text">付款时间：20220 10.25</view>
			<view class="hjk_text">接单时间：20220 10.25</view>
			<view class="hjk_text">出发时间：20220 10.25</view>
			<view class="hjk_text">到达时间：20220 10.25</view>
			<view class="hjk_text">服务时间：20220 10.25</view>
			<view class="hjk_text">完成时间：20220 10.25</view>
		</view> -->
		<view style="height:50upx"></view>
		<!-- end -->


		<!-- <view class="fixed_bt" v-if="status ==5">
			<view class="fixed_bt_sm" @click="complain">
				投诉
			</view>
			<view class="fixed_bt_sm pov" @click="open1">
				立即评价
			</view>
		</view> -->

		<!-- pop 1 评价-->
		<u-popup :show="show1" @close="close1" :round="10" :closeable="true">
			<view class="bei_view">
				<view style="font-size:30upx;text-align: center;">发布评价</view>
				<view class="bei_cd">
					<view class="bei_cd_left">评分</view>
					<view class="bei_cd_right">
						<u-rate :count="5" v-model="rate"></u-rate>
					</view>
				</view>
				<u--textarea v-model="selectbeizhu" placeholder="请输入内容" count class="textarea"></u--textarea>
				<view class="bei_btn" @click="close1">立即发布</view>
			</view>
		</u-popup>



	</view>
</template>

<script>
	import { generateQRCode } from "../../util/qrcode.js"
	export default {
		data(){
			return {
				allTime:0,
			}
		},
		components: {

		},
		onLoad(val) {
			this.info = JSON.parse(val.info)
			console.log(this.info);
		},
		mounted(){
			generateQRCode(this.info?.orderId, 'qrcodeCanvas', 150, 150);
			this.allTime = this.info.itemListVoList.reduce((prev,curr)=>{
				return prev + +curr.itemDuration
			},0)
		},
		data() {
			return {
				info: null,
				status: 5, //0待接单 1接单 2出发 3到达 4开始服务  5服务完成  6取消订单
				num: 0, //项目数量
				show1: false, //评价弹窗
				selectbeizhu: '', //评价内容
				rate: 5
			}
		},
		methods: {
			open1() {
				this.show1 = true;
			},
			close1() {
				this.show1 = false;
			},
			complain() {
				uni.navigateTo({
					url: '/pagesA/complain/index'
				})
			},
			back() {
				uni.navigateBack(-1)
			},
			drawback() {
				uni.navigateTo({
					url: '/pages/order/drawback'
				})
			},
			copy(item) {
				uni.setClipboardData({
					data: item
				});
				uni.showToast({
					title: '成功'
				})
			},
			cancel_order() { //取消订单
				// 没接单或者接单未出发可免费取消
				if (this.status == 0 || this.status == 1) {
					let _this = this;
					uni.showModal({
						title: '提示',
						content: '确定取消该订单？',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								_this.status = 6;
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
				if (this.status == 2 || this.status == 3 || this.status == 4) {
					let _this = this;
					uni.showModal({
						title: '提示',
						content: '技师已出发，取消该订单需要扣除车 费和服务项目20%费用，确定取消该订单？',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								_this.status = 6;
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
				if (this.status == 5) {
					let _this = this;
					uni.showModal({
						title: '提示',
						content: '服务已完成，不可取消',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			submit() { //加钟
				uni.navigateTo({
					url: '/pagesA/detail/detail_order'
				})
			},
			hu() {

			}
		}
	}
</script>

<style>
	.top {
		background-color: #07c160;
		padding: 20upx;
	}

	.content {
		width: 100%;
		min-height: 50vh;
		height: 100%;
		background-color: #ededed;
	}

	.fixed_tp {
		position: relative;
	}

	.status_img_view {
		width: 92%;
		margin: -20upx auto 20upx;
	}

	.status_img {
		width: 100%;
		position: relative;
	}

	.tp {
		width: 91%;
		background-color: #07c160;
		border-radius: 10upx;
		color: #fff;
		font-size: 28upx;
		padding: 20upx 0;
		margin: 0 auto;
	}

	.tp_no {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.no_bai_address_img {
		width: 30upx;
		margin-right: 20upx;
	}

	.tp_you {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tp_you_left {
		width: 15%;
		text-align: center;
	}

	.you_bai_address_img {
		width: 30upx;
	}

	.tp_you_right {
		width: 85%;
	}

	.tp_you_right_sm_text {
		margin-top: 20upx;
		position: relative;
		display: flex;
		align-items: center;
	}

	.list_cen {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 30upx;
		border-bottom: 2upx solid #ededed;
		margin-bottom: 30upx;
	}

	.tou_img {
		width: 120upx;
		height: 120upx;
		border-radius: 100upx;
	}

	.list_cen_right {
		width: 77%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list_cen_right_text {
		font-size: 28upx;
		margin-bottom: 15upx;
	}

	.list_bt {
		padding: 30upx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.list_btn {
		font-size: 24upx;
		border: 2upx solid #999;
		border-radius: 100upx;
		padding: 10upx 20upx;
		color: #333;
		margin-left: 20upx;
		white-space: nowrap;
	}

	.ikd {
		white-space: nowrap;
		margin-left: 40upx;
		background-color: #fff;
		border-radius: 5upx;
		color: #07c160;
		padding: 5upx 15upx;
	}

	.klc {
		width: 90%;
		margin: 50upx auto;
		color: #fff;
		font-size: 45upx;
		font-weight: 700;
		position: relative;
	}

	.klc_num {
		margin-top: 10upx;
		font-weight: 700;
		font-size: 26upx;
	}

	.ujd {
		width: 83%;
		margin: 0 auto;
		padding: 30upx;
		background-color: #fff;
		border-radius: 10upx;
		font-size: 26upx;
	}

	.ujd_label {
		font-weight: 700;
		font-size: 30upx;
	}

	.ujd_sm {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 25upx;
	}

	.ujd_text2 {
		display: flex;
		align-items: center;
	}

	.ujd_text2 image {
		width: 25upx;
		margin-right: 10upx;
	}

	.lop {
		width: 83%;
		margin: 30upx auto;
		padding: 30upx;
		background-color: #fff;
		border-radius: 10upx;
		font-size: 26upx;
	}

	.lop_sm {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20upx;
	}

	.lop_sm_left {
		max-width: 70%;
	}

	.dsx {
		font-weight: 700;
		font-size: 28upx;
	}

	.csx {
		margin-top: 10upx;
	}

	.lop_end {
		padding: 10upx 0;
		font-size: 28upx;
		border-top: 2upx solid #ccc;
		margin-top: 30upx;
	}

	.asd {
		margin: 30upx auto;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333;
	}

	.asd image {
		width: 30upx;
		margin-right: 10upx;
	}

	.jv {
		background-color: #07c160;
		color: #fff;
		text-align: center;
		padding: 20upx 0;
		border-radius: 10upx;
		width: 92%;
		margin: 50upx auto;
	}

	.hjk {
		width: 83%;
		border-radius: 10upx;
		margin: 0 auto 100upx;
		padding: 30upx;
		background-color: #fff;
		font-size: 26upx;
	}
	.qrcode{
		margin: 40upx 0;
	}
	.hjk_tit {
		font-weight: 700;
		font-size: 30upx;
	}

	.hjk_text {
		margin-top: 20upx;
		color: #999;
	}

	.fixed_bt {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 999;
	}

	.fixed_bt_sm {
		width: 50%;
		background-color: #fff;
		font-weight: 700;
		font-size: 28upx;
		padding: 30upx 0;
		text-align: center;
	}

	.pov {
		background-color: #07c160;
		color: #fff;
	}

	.shop_list {
		width: 100vw;
	}

	.list {
		width: 90%;
		height: 520upx;
		overflow-y: auto;
		margin: 0 auto 120upx;
		background-color: #fff;
		border-radius: 10upx;
		margin-top: -20upx;
		padding: 20upx 5% 0 5%;
		position: relative;
	}

	.list_sm {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30upx;
		padding-bottom: 20upx;
		border-bottom: 2upx solid #ededed;
	}

	.shop_img {
		width: 200upx;
		height: 200upx;
		object-fit: cover;
		border-radius: 10upx;
	}

	.list_right {
		width: 65%;
	}

	.list_tit {
		font-weight: 700;
		font-size: 28upx;
	}

	.list_text {
		color: #999;
		margin-top: 20upx;
		font-size: 25upx;
	}

	.list_ikd {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20upx;
	}

	.money {
		font-weight: 700;
		color: #ff6c00;
	}

	.shop_bt_view {
		margin: 30upx 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.shop_bt {
		width: 90%;
		height: 90upx;
		line-height: 90upx;
		border-radius: 100upx;
		background-color: #333;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shop_bt_left {
		width: 70%;
		height: 100%;
		font-size: 35upx;
		text-indent: 30upx;
	}

	.shop_bt_right {
		width: 30%;
		height: 100%;
		background-color: #07c160;
		border-radius: 0 100upx 100upx 0;
		text-align: center;
	}

	.bei_view {
		padding: 30upx;
	}

	.textarea {
		height: 300upx;
		margin-top: 30upx;
	}

	.bei_btn {
		background-color: #07c160;
		border-radius: 10upx;
		color: #fff;
		font-size: 30upx;
		text-align: center;
		margin: 30upx 0 0;
		padding: 20upx 0;
	}

	.bei_cd {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20upx;
	}
</style>